<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- 引用的资源和文档配置 -->
        <meta charset="UTF-8">
        <title>css复习</title>
        <link rel="stylesheet" href="css/common.css">
        <link rel="stylesheet" href="css/style.css">
        <style>
            /* 选择器：class、id、标签选择器 */
            /* 派生选择器：包含选择器 */
            /* 重置样式直接用标签选择器 */
            a{
                text-decoration: none;
            }
            li{
                list-style: none;
            }
            /* 包含(后代)选择器-空格隔开 */
            /* .box .link a{
                color: #000;
            } */
            /* 子选择器- > */
            .box .link>a{
                color: #000;
            }
            .title{
                color: #ccc;
                border-bottom: 3px dashed #f00;
            }
        </style>
    </head>
    <body>
        <!-- css引用方式-3种 -->
        <!-- 行内样式 -->
        <h1 
            style="color: #f00;border-bottom: 1px solid #ccc;"
        >
            CSS复习
        </h1>
        <!-- 页内样式 -->
        <h1 class="title">页内样式</h1>
        <!-- 外部样式 -->
        <h1 id="title">外部样式</h1>
        <a href="#">京东</a>
        <div class="box">
            <nav class="link">
                <a href="#">百度</a>
                <a href="#">淘宝</a>
            </nav>
            <div>
                <div>1</div>
                <div>2</div>
                <div>3</div>
            </div>
        </div>
    </body>
</html>